<template>
  <view class="orderDetails_">
    <view class="header_">
      <image src="/static/orderDetails/bc.png"></image>
      <view class="header_wrapper">
        <view class="top_">
          <image @tap="backFn" src="/static/orderDetails/2.png"></image>
        </view>
        <view class="message_" v-if="statusOrderTyle === '1'">
          <view class="text_title" v-if="Number(ordersDetails.orderStats) === 0"
            >等待买家支付
          </view>
          <view class="text_title" v-if="Number(ordersDetails.orderStats) === 1"
            >买家已付款，等待发货
          </view>
          <view class="text_title" v-if="Number(ordersDetails.orderStats) === 2"
            >卖家已发货，等待签收
          </view>
          <view class="text_title" v-if="Number(ordersDetails.orderStats) === 3"
            >交易完成，已签收
          </view>
          <view class="text_title" v-if="ordersDetails.orderStats == -1"
            >订单已取消
          </view>
         <!-- <view
            class="text_title"
            v-if="Number(orders.status) === 5 && Number(orders.itemType) === 0"
            >订单已申请售后
          </view>
          <view
            class="text_title"
            v-if="Number(orders.status) === 5 && Number(orders.itemType) > 0"
            >订单售后已审核结束
          </view> -->
          <!--         订单状态 -->
          <view class="text_message" v-if="Number(ordersDetails.orderStats) === 0">
            <text>剩</text>
            <view class="time_wrapper">
              <!-- <u-count-down
                ref="uCountDown"
                :timestamp="timestamp"
                :autoplay="false"
                @change="change"
                @end="endFn"
                separator-color="#353535"
                separator-size="35"
                bg-color="#FA5151"
                color="#FFFFFF"
                font-size="22"
                height="35"
              ></u-count-down> -->
			  <u-count-down :time="timestamp" format="HH:mm:ss"></u-count-down>
            </view>
            <text>自动关闭订单</text>
          </view>
          <view class="text_message" v-if="Number(ordersDetails.orderStats) === 1">
            <text>您的商品正在准备中...</text>
          </view>
          <view class="text_message" v-if="Number(ordersDetails.orderStats) === 2">
            <text>商品已发货，请耐心等待喔~</text>
          </view>
          <view class="text_message" v-if="Number(ordersDetails.orderStats) === 3">
            <text>商品已经由本人签收！</text>
          </view>
          <view class="text_message" v-if="ordersDetails.orderStats== -1">
            <text>如有需要，请重新下单</text>
          </view>
          <view
            class="text_message"
            v-if="Number(orders.status) === 5 && Number(orders.itemType) === 0"
          >
            <text>订单审核中</text>
          </view>
          <view
            class="text_message"
            v-if="Number(orders.status) === 5 && Number(orders.itemType) === 1"
          >
            <text>订单审核已通过</text>
          </view>
          <view
            class="text_message"
            v-if="Number(orders.status) === 5 && Number(orders.itemType) === 2"
          >
            <text>订单审核驳回</text>
          </view>
        </view>
        <view class="message_" v-if="statusOrderTyle === '2'">
          <view class="text_title" v-if="Number(orders.status) === 0"
            >订单待审核
          </view>
          <view class="text_title" v-if="Number(orders.status) === 1"
            >订单待寄回
          </view>
          <view class="text_title" v-if="Number(orders.status) === 2"
            >订单售后中
          </view>
          <view class="text_title" v-if="Number(orders.status) === 3"
            >订单已完成
          </view>
          <view class="text_title" v-if="Number(orders.status) === 4"
            >订单审核驳回
          </view>
        </view>
      </view>
    </view>
    <view class="main_wrapper">
      <!-- <view class="addressa_">
        <view class="left_">
          <view class="info_1">
            <view class="info_name">{{ ordersDetails.consigneeName }}</view>
            <view class="info_phone">{{ ordersDetails.consigneeMobile }}</view>
          </view>
          <view class="info_2">{{
           ordersDetails.consigneeAddress
          }}</view>
        </view>
        <view class="right_">
          <image src="/static/orderDetails/1.png"></image>
        </view>
        <image src="/static/orderDetails/3.png" class="img_"></image>
      </view> -->
      <!--     我的订单 -->
      <view class="order_info_wrapper">
        <view class="header_">
          <image src="/static/order/2.png"></image>
          <text>
            {{
              ordersDetails.packageName||""
            }}
          </text>
        </view>
        <view class="order_item" >
          <view class="item_wrapper">
            <image :src="httpUrlFn(ordersDetails.packageImage)" />
            <view class="right_">
              <view class="right_1">
                <view>门店：{{ordersDetails.shopName||"" }}</view>
                <view
                  >￥
                  <text>{{ ordersDetails.totalAmount||"" }}</text>
                </view>
              </view>
			  <view class="right_3">
			    <view>美容师:{{ ordersDetails.teamName||"" }}</view>
			    <view>{{ item.goodsNumber||"" }}</view>
			  </view>
                           <view class="right_2">
                             <view
                               >预约时间:
                               <text>{{ordersDetails.schedulDate||""}} {{ordersDetails.timeSection||""}}</text>
                             </view>
                           </view>
			  
			  
              
            </view>
          </view>
        </view>
        <view class="money_wrapper">
          <view>
            <!-- <view>共{{ ordersDetails.goodsNumber }}件</view> -->
            <text>商品小计：</text>
            <text class="money_">￥{{ ordersDetails.totalAmount?ordersDetails.totalAmount:"" }}</text>
          </view>
        </view>
      </view>
      <!--    运费和订单备注  -->
      <!-- <view class="freight_">
        <view>
          <view>运费</view>
          <view>包邮</view>
        </view>
      </view> -->
      <!--    订单编号  -->
      <view class="freight_ order_number">
        <view>
          <view>订单编号</view>
          <view>
            <text>{{ ordersDetails.orderNo }}</text>
            <image
              src="/static/logistics/3.png"
              @tap="copyFn(ordersDetails.orderNo)"
            ></image>
          </view>
        </view>
        <view>
          <view>创建时间</view>
          <view>{{ ordersDetails.createDate }}</view>
        </view>
        <!--        <view>-->
        <!--          <view>支付单号</view>-->
        <!--          <view>无</view>-->
        <!--        </view>-->
      </view>
      <!--     售后信息 -->
      <view class="freight_ order_number" v-if="Number(orders.status) === 5">
        <view>
          <view>售后编号</view>
          <view>
            <text>{{ orders.afterSaleSn }}</text>
            <image
              src="/static/logistics/3.png"
              @tap="copyFn(orders.afterSaleSn)"
            ></image>
          </view>
        </view>
        <view>
          <view>售后状态</view>
          <view>
            {{
              Number(orders.itemType) === 0
                ? "待审核"
                : Number(orders.itemType) === 1
                ? "申请售后已成功"
                : Number(orders.itemType) === 2
                ? "申请售后驳回"
                : ""
            }}
          </view>
        </view>
        <!--        <view>-->
        <!--          <view>驳回备注</view>-->
        <!--          <view>这是驳回的信息描述</view>-->
        <!--        </view>-->
        <!--        <view>-->
        <!--          <view>审核时间</view>-->
        <!--          <view>2023-01-01 12:10:20</view>-->
        <!--        </view>-->
      </view>
    </view>
    <!--   按钮 -->
    <view class="footer_wrapper" v-if="Number(ordersDetails.orderStats) !== 5">
      <view class="but_wrapper">
        <view v-if="statusOrderTyle === '1'">
          <view
            class="cancellation_"
            @click="cancellationFn(ordersDetails.id, 4)"
            v-if="Number(ordersDetails.orderStats) === 0"
            >取消订单</view
          >
          <view
            class="payment_"
            v-if="Number(ordersDetails.orderStats) === 0"
            @click="paymentFn(ordersDetails)"
            >立即支付</view
          >
          <!-- <view
            class="logistics_"
            @click="logisticsFn(ordersDetails.id)"
            v-if="Number(ordersDetails.orderStats) === 2 || Number(ordersDetails.orderStats) === 3"
            >查看物流</view
          > -->
          
          <!--          <view class="refund_" v-if="Number(orders.status) === 1"-->
          <!--            >修改地址</view-->
          <!--          >-->
          <!--          <view class="after_sales_" v-if="Number(orders.status) === 3"-->
          <!--            >申请售后</view-->
          <!--          >-->
          <view
            class="delete_order_"
            v-if="ordersDetails.orderStats ==-1"
            @click="cancellationFn(ordersDetails.id, '-1')"
            >删除订单</view
          >
        </view>
        <view v-if="Number(ordersDetails.orderStats) === 2">
          <view
            class="logistics_"
            @click="logisticsFn(orders)"
            v-if="Number(ordersDetails.orderStats) === 2"
            >查看物流</view
          >
          <view
            class="delete_order_"
            v-if="Number(ordersDetails.orderStats) === 3"
            @click="cancellationFn(orders, '-1')"
            >删除订单</view
          >
		  <view
		    class="confirm_"
		    v-if="Number(ordersDetails.orderStats) === 2"
		    @click="cancellationFn(ordersDetails.id, 3)"
		    >确认收货</view
		  >
        </view>
      </view>
    </view>
    <u-modal
      :show="showModel"
      @confirm="confirm"
	  @cancel="cancelfun"
      title="温馨提示"
      ref="uModal"
      :async-close="true"
      :content="showModelContent"
      :show-cancel-button="true"
    ></u-modal>
  </view>
</template>

<script>
import {
  getGoodsOrderPage,
  cancelGoodsOrder,
  delGoodsOrder,
  confirmGoodsOrderArrival,
  payOrderCallbackTest,
  getGoodsOrderDetails,
  getPackageOrderDetails,
  

} from "@/api/orderApi";
import { BASE_URL_IMAHE } from "../../../../utils/https";
import {randomDerate} from "@/api/address";

export default {
  name: "index.vue",
  onLoad(options) {
    console.log(options, "options23345");
	
	
    if (options.status === "1") {
      this.orders = JSON.parse(decodeURIComponent(options.order));
      console.log(this.orders, "options");
      this.statusOrderTyle = options.status;
    
	 
	  
     

      if (this.orders.status === 0) {
        setTimeout(() => {
          //如果设置autoplay为false，就需要手动通过 refs的形式通知倒计时开始执行，调用的是组件内部的start()方法
          this.$refs.uCountDown.start();
        }, 2000);
      }
    } else if (options.status === "2") {
      this.statusOrderTyle = options.status;
      this.orders = JSON.parse(decodeURIComponent(options.order));
      console.log(JSON.parse(JSON.stringify(this.orders)), "options");
      this.statusOrderTyle = options.status;
    }
  },
  data() {
    return {
      statusOrderTyle: "",
      orders: {},
      timestamp: 3,
      showModel: false,
      showModelContent: "",
      ordersDetails: {},
      orderUpdata: {},
    };
  },
  onShow() {
    this.orderList();
  },
  methods: {
    httpUrlFn(item) {
       return BASE_URL_IMAHE + item;
    },
	cancelfun(){
		this.showModel = false;
	},

    async orderList() {
      const res = await getPackageOrderDetails({packageOrderId:this.orders.id});
      if (res.result == 0) {
		  this.ordersDetails =res.packageOrder
        // console.log(res.data, "data ordersDetails");
        // this.ordersDetails = {
        //   ...res.data,
        //   ...res.data.orderItems[0],
        //   properties: res.data.orderItems[0].properties
        //     .replace("{", "")
        //     .replace("}", "")
        //     .replace(/"/gi, ""),
        //   itemType: res.data.orderItems[0].itemType,
        // };
		
		if(this.ordersDetails.orderStats==0){
				  const currentDate = new Date().getTime();
				   console.log(this.ordersDetails.cancelPayTime, "this.orders.cancelPayTime");
				  // const date = new Date(this.orders.cancelTime);
				  const time = this.ordersDetails.cancelPayTime - currentDate;
				  console.log(time, "time");
		 this.timestamp = time ;
		 // this.timestamp = 1000*50
		 setTimeout(() => {
		   //如果设置autoplay为false，就需要手动通过 refs的形式通知倒计时开始执行，调用的是组件内部的start()方法
		   this.$refs.uCountDown.start();
		 }, 10);
		}
        console.log(this.ordersDetails, "data ordersDetails");
      }
    },

    //返回
    backFn() {
      uni.navigateBack({
        delta: 1,
      });
    },

    //取消订单
    cancellationFn(item, num) {
      console.log(num, "num");
      console.log("取消订单");
      console.log(this.orders, "orders");

      if (num === "-1") {
        this.showModelContent = "是否确认删除订单？";
      }

      if (num === 4) {
        this.showModelContent = "确定要取消订单吗？";
      } else if (num === 3) {
        this.showModelContent = "是否确定收货？";
      }
      if (num !== 5) {
        this.showModel = true;
      }
      this.orderUpdata = { id:item, num };
    },

    navBackFn() {
      // const pages = getCurrentPages();
      // const prevPage = pages[pages.length - 2]; //上一个页面
      // const object = {
      //   swiperCurrent: 0,
      //   current: 0,
      // };
      // prevPage.$vm.otherFun(object); //重点$vm
      uni.navigateBack({
        delta: 1,
      });
    },

    //弹窗确认按钮
    async confirm() {
      this.showModel = false;
      const {  id, num } = this.orderUpdata;
	  console.log(id, num,"id, num")
	
	  
	  // if (num === "-3") {
	  //   const data = {
	  //     orderSn: orderSn,
	  //   };
	  //   const res = await cancelApi(data);
	  //   console.log(res, "取消退款");
	  //   if (res.code === 0) {
	  //     uni.showToast({
	  //       title: `取消成功`,
	  //       icon: "success",
	  //       duration: 2000,
	  //     });
	  
	  //     this.order.pageNo = 1;
	  //     this.orderFilter = [];
	  //     this.current = 2;
	  //     this.swiperCurrent = 2;
	  //     // await this.myOrder();
	  //   }
	  //   return;
	  // }
	  
	  if (num == "-1") {
	  		  
	    //删除订单
	    const res = await delGoodsOrder({orderId:id});
	    console.log(res, "删除订单");
	    if (res.result == 0) {
	      //根据index删除数组中取消的那一项
	      // this.orderList.splice(index, 1);
	      uni.showToast({
	        title: `删除成功`,
	        icon: "success",
	        duration: 2000,
	      });
		  setTimeout(() => {
		        this.navBackFn();
		      }, 2000);
	    }
	    return;
	  }
	  if(num == "4"){
	  		  //删除订单
	  		   // this.orderFilter.splice(index, 1);
	  		  
	  		   
	  		   
	  		  const res = await cancelGoodsOrder({orderId:id});
	  		  if (res.result == 0) {
	  		    //根据index删除数组中取消的那一项
	  		   await this.myOrder();
	  		    uni.showToast({
	  		      title: `订单取消成功`,
	  		      icon: "success",
	  		      duration: 2000,
	  		    });
				setTimeout(() => {
				      this.navBackFn();
				    }, 2000);
	  		  }
	  		  return;
	  		  
	  }
	  
	  if(num == "3"){
	  		  //删除订单
	  		   // this.orderFilter.splice(index, 1);
	  		  
	  		   
	  		   
	  		  const res = await confirmGoodsOrderArrival({orderId:id});
	  		  if (res.result == 0) {
	  		    //根据index删除数组中取消的那一项
	  		   await this.myOrder();
	  		    uni.showToast({
	  		      title: `已确认收货`,
	  		      icon: "success",
	  		      duration: 2000,
	  		    });
				setTimeout(() => {
				      this.navBackFn();
				    }, 2000);
	  		  }
	  		  return;
	  		  
	  }

      // console.log(this.orderUpdata, "orderUpdata");

      // if (num === "-1") {
      //   //删除订单
      //   const res = await cancelDelete(orderSn);
      //   console.log(res, "删除订单");
      //   if (res.code === 0) {
      //     //根据index删除数组中取消的那一项
      //     uni.showToast({
      //       title: `删除成功`,
      //       icon: "success",
      //       duration: 2000,
      //     });
      //     setTimeout(() => {
      //       this.navBackFn();
      //     }, 2000);
      //   }
      //   return;
      // }

      // //确认收货状态：0->未确认；1->已确认
      // const confirmToggle = confirmStatus && confirmStatus > 0 ? 1 : 0;
      // //确认收货时间
      // const time = new Date().getTime();
      // console.log(time, "time");
      // const data = {
      //   orderSn,
      //   status: num,
      //   confirmStatus: confirmStatus && confirmStatus > 0 ? 1 : 0,
      //   receiveTime: confirmToggle === 1 ? time : "",
      // };
      // const prompt = {
      //   5: "申请已提交",
      //   4: "取消订单成功",
      //   3: "确认收货成功",
      // };
      // let res = {};

      // res = await updateOrderStatusByOrderSn(data);
      // if (res.code === 0) {
      //   //根据index删除数组中取消的那一项
      //   uni.showToast({
      //     title: `${prompt[num]}`,
      //     icon: "success",
      //     duration: 2000,
      //   });
      //   setTimeout(() => {
      //     this.navBackFn();
      //   }, 2000);
      // }
    },

    //复制订单
    copyFn(item) {
      uni.setClipboardData({
        data: item, // data的值为你要复制的内容
        success: (res) => {
          console.log(res, "复制");
		  uni.showToast({
		  	icon:"none",
		  	title:"复制成功"
		  })
        },
      });
    },

    //查看物流
    logisticsFn(item) {
      console.log(item);
      uni.navigateTo({
        url: `/pages/subpackage/logistics/index?orderId=${item.id}`,
      });
    },

    //立即支付
    async paymentFn(item) {
		// tradeNo
		var that=this
		console.log(item.tradeNo)
		// 打开支付宝支付
		uni.requestPayment({
		    provider: 'alipay',
		    orderInfo: item.tradeNo, //支付宝订单数据
		    success: function(res_alipay) {
									
									if(res_alipay.resultCode=="9000"){
																			 uni.showToast({
																			   title: "支付成功",
																			   icon: "success",
																			   duration: 2000,
																			 });
																			 
																			 setTimeout(() => {
																			   that.navBackFn()
																			 }, 1000);
								
									
									 }else{
										
										uni.showToast({
										  title: "支付失败",
										  icon: "error",
										  duration: 2000,
										});
										 setTimeout(() => {
										   uni.redirectTo({
										     url: "/pages/subpackage/order/index?status=1&type=1",
										   });
										 }, 1000);
										
									 }
		    },
								 fail(rej) {
								 	console.log("rej",rej)
								 }
		})
		// const res = await payOrderCallbackTest (JSON.stringify({outTradeNo:item}));
		
		//   if (res.result == 0) {
		//     uni.showToast({
		//       title: "支付成功",
		//       icon: "success",
		//       duration: 2000,
		//     });
		// 		  setTimeout(() => {
		// 		          this.navBackFn();
		// 		        }, 2000);
		//   } else {
		//     uni.showToast({
		//       title: "支付订单错误",
		//       icon: "success",
		//       duration: 2000,
		//     });
		//     return;
		// }
      // const { orderSn, sign } = item;
      // let signObj = JSON.parse(sign);
      // if (!sign) {
      //   //start
      //   //根据订单编号获取订单token
      //   const res = await getOrderTokenByOrderSn(orderSn);
      //   //随机减免
      //   const randomDerateParams = await randomDerate(res.data.orderToken);
      //   if (res.code === 0) {
      //     const data = {
      //       orderToken: res.data.orderToken,
      //       openId: uni.getStorageSync("openId")
      //         ? uni.getStorageSync("openId")
      //         : "",
      //       randomDerateMoney: randomDerateParams.data || "",
      //     };
      //     const resWinxin = await weixinPay(data);
      //     console.log(resWinxin, "微信支付");
      //     signObj = resWinxin.data;
      //   } else {
      //     uni.showToast({
      //       title: "支付订单错误",
      //       icon: "success",
      //       duration: 2000,
      //     });
      //     return;
      //   }
      //   //end
      // }
      // console.log(signObj,'signObj')
      // const than = this;
      // if (signObj) {
      //   const payParams = signObj;
      //   uni.requestPayment({
      //     provider: "wxpay",
      //     timeStamp: payParams.timeStamp,
      //     nonceStr: payParams.nonceStr,
      //     package: payParams.package,
      //     signType: payParams.signType,
      //     paySign: payParams.paySign,
      //     success: function (res) {
      //       if (res.errMsg === "requestPayment:ok") {
      //         uni.showToast({
      //           title: "支付成功",
      //           icon: "success",
      //           duration: 2000,
      //         });
      //       }
      //       setTimeout(() => {
      //         this.navBackFn();
      //       }, 2000);
      //     },
      //     fail: function (error) {
      //       console.log(error, "支付失败");
      //       uni.showToast({
      //         title: "支付失败",
      //         icon: "error",
      //         duration: 2000,
      //       });
      //       if (error.errMsg === "requestPayment:fail cancel") {
      //         uni.showToast({
      //           title: "支付失败",
      //           icon: "error",
      //           duration: 2000,
      //         });
      //       }
      //     },
      //   });
      // }
      // }
    },

    // 事件触发，每秒一次
    change(timestamp) {
      // console.log(timestamp, "timestamp");
    },
    //倒计时结束
    endFn() {
      console.log("倒计时结束了");
	  uni.redirectTo({
	    url: `/pages/subpackage/orderDetails/index?order=${encodeURIComponent(
	      JSON.stringify(this.orders)
	    )}&status=1`,
	  });
    },
  },
};
</script>

<style scoped lang="scss">
.orderDetails_ {
  //background: #F5F5F5;
  height: 100vh;
  //background: pink;
  > .header_ {
    position: relative;

    > image {
      width: rpx(375);
      height: rpx(118);
      vertical-align: middle;
    }

    > .header_wrapper {
      position: absolute;
      top: rpx(16);
      left: rpx(12);
      right: 0;

      > .top_ {
        > image {
          width: rpx(24);
          height: rpx(24);
          vertical-align: middle;
        }
      }

      > .message_ {
        margin-top: rpx(16);
        margin-left: rpx(12);

        .text_title {
          font-size: rpx(17);
          font-weight: bold;
          color: #353535;
        }

        .text_message {
          margin-top: rpx(4);
          display: flex;
          align-items: center;

          .time_wrapper {
            margin: rpx(0) rpx(4);
          }
        }
      }
    }
  }

  > .main_wrapper {
    background: #f5f5f5;
    margin: rpx(0) rpx(12) rpx(16);
    display: flex;
    flex-direction: column;
    padding-bottom: rpx(68);

    > .addressa_ {
      width: 100%;
      display: flex;
      background: #ffffff;
      border-radius: rpx(5);
      align-items: center;
      justify-content: space-between;
      padding: rpx(12) rpx(12) rpx(16) rpx(12);
      position: relative;

      > .left_ {
        display: flex;
        flex-direction: column;
        font-size: rpx(15);
        font-weight: 400;
        color: #353535;

        .info_1 {
          display: flex;
          margin-bottom: rpx(4);

          > .info_name {
            margin-right: rpx(10);
          }
        }

        .info_2 {
          font-size: rpx(13);
          font-weight: 400;
          color: #b2b2b2;
        }
      }

      > .right_ {
        > image {
          width: rpx(16);
          height: rpx(16);
          vertical-align: middle;
        }
      }

      > .img_ {
        width: rpx(339);
        height: rpx(2);
        vertical-align: middle;
        position: absolute;
        bottom: 0;
        left: rpx(6);
        right: rpx(6);
      }
    }

    > .order_info_wrapper {
      margin-top: rpx(8);
      padding: rpx(16) rpx(12);
      width: rpx(351);
      //height: rpx(264);
      background: #ffffff;
      border-radius: rpx(5);

      > .header_ {
        > image {
          width: rpx(14);
          height: rpx(14);
          vertical-align: middle;
          margin-right: rpx(4);
        }

        > text {
          font-size: rpx(13);
          font-weight: 400;
          color: #353535;
        }
      }

      > .order_item {
        padding-bottom: rpx(8);
        border-bottom: rpx(1) solid #efefef;
		margin-top: rpx(10);

        > .item_wrapper {
          padding: rpx(8) rpx(0);
          display: flex;

          > image {
            width: rpx(72);
            height: rpx(72);
            vertical-align: middle;
          }

          > .right_ {
            margin-left: rpx(6);
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            > .right_1 {
              display: flex;
              justify-content: space-between;

              view:first-child {
                font-size: rpx(12);
                font-weight: 400;
                color: #353535;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; /*最大行数*/
              }

              view:last-child {
                font-size: rpx(12);
                font-weight: bold;
                color: #353535;
                margin-left: rpx(5);
              }
            }

            > .right_2 {
              display: flex;
              margin-top: rpx(2);
              margin-bottom: rpx(4);

              > view {
                padding: rpx(1) rpx(3);
                //height: rpx(16);
                // background: rgba(250, 81, 81, 0.1);
                border-radius: rpx(2);
                // border: rpx(1) solid #fa5151;
                font-size: rpx(10);
                font-weight: 400;
                // color: #fa5151;
              }
            }

            > .right_3 {
              display: flex;
              justify-content: space-between;
              font-size: rpx(12);
              font-weight: 400;
              color: #888888;
            }
          }
        }
      }

      > .money_wrapper {
        display: flex;
        padding: rpx(12) rpx(12) rpx(0);
        color: #353535;
        font-size: rpx(13);

        > view {
          display: flex;
          margin-left: auto;
          align-items: center;

          view:first-child {
            margin-right: rpx(10);
          }

          > .money_ {
            color: #fa5151;
            font-weight: bold;
          }
        }
      }
    }

    > .freight_ {
      display: flex;
      flex-direction: column;
      background: #ffffff;
      border-radius: rpx(5);
      margin-top: rpx(8);
      padding: rpx(16) rpx(12);

      > view {
        display: flex;
        justify-content: space-between;

        &:not(:first-child) {
          margin-top: rpx(16);
        }
      }
    }

    > .order_number {
      view:first-child {
        view:last-child {
          display: flex;
          align-items: center;

          > image {
            vertical-align: middle;
            width: rpx(14);
            height: rpx(14);
            margin-left: rpx(6);
          }
        }
      }
    }
  }

  > .footer_wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    > .but_wrapper {
      background: #ffffff;
      padding: rpx(12);
      display: flex;
      margin-top: rpx(12);

      > view {
        display: flex;
        margin-left: auto;

        view {
          width: rpx(88);
          height: rpx(32);
          border-radius: rpx(16);
          border: rpx(1) solid #dddddd;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: rpx(15);
          font-weight: 400;
          color: #888888;

          &:not(:last-child) {
            margin-right: rpx(8);
          }
        }

        > .confirm_ {
          border: rpx(1) solid #fa5151;
          color: #fa5151;
        }

        > .payment_ {
          color: #ffffff;
          background: #fa5151;
        }
      }
    }
  }
}
</style>
